<template>
  <div>
    <a-modal
      title="导出范围确定"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model ref="form" :model="form" :rules="{
        formId: [{ required: true, message: '请选择来源表单', trigger: 'change' }],
      }">
        <a-form-model-item label="来源表单"
                           prop="formId"
                          :label-col="labelCol"
                          :wrapper-col="wrapperCol">
          <a-select style="width: 90%" v-model="form.formId" show-search placeholder="请选择来源表单"
                        :filter-option="search">
            <a-select-option v-for="(item, i) in formSource"
                            :key="i"
                            :value="item.formId">
                            {{ item.formName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
          <a-form-model-item label="发起人"
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol">
            <a-input v-model="form.starterName" style="width: 90%" placeholder="发起人" allow-clear/>
          </a-form-model-item>
          <a-form-model-item label="流程状态"
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol">
            <a-select v-model="form.handleType" placeholder="流程状态" style="width:90%;" allow-clear>
              <a-select-option value="已拒绝">已拒绝</a-select-option>
              <a-select-option value="运行中">运行中</a-select-option>
              <a-select-option value="已办结">已办结</a-select-option>
            </a-select>
          </a-form-model-item>
        <a-form-model-item label="目标时间"
                          :label-col="labelCol"
                          :wrapper-col="wrapperCol">
          <a-range-picker style="width: 90%" v-model="form.startTime">
            <template slot="dateRender" slot-scope="current">
              <div class="ant-calendar-date" >
                {{ current.date() }}
              </div>
            </template>
          </a-range-picker>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { create } from "@zh/common-utils/http";


// 1、引入Vue等框架组件库或插件
// 2、引入自定义组件
// 3、引入第三方工具类插件
// 4、引入自定义工具或插件或混入或基类等
// 5、引入API
import { exportFlowInstenceTable, getFromList } from '../../api/statistics/index.js'
const clone = require('clone')
export default {
  /** 统计导出条件页面 */
  name: 'StatisticsListExportModal',
  props: {},
  data () {
    return {
      // 显示隐藏
      visible: false,
      // 表单数据
      form: {
        // 来源表单
        formId: undefined,
        // 发起人名称
        starterName: '',
        // 流程状态
        handleType: undefined,
        // 流程发起时间区间
        startTime: null
      },
      // 表单数据源
      formSource: [],
      // 布局
      labelCol: { span:4 },
      wrapperCol: { span:18 }
    }
  },
  computed: {
    // 表单id为key的对象
    formMap(){
      const result = {}
      this.formSource.forEach(element => {
        result[element.formId] = {
          formId: element.formId,
          appKey: element.appKey,
          formVersion: element.version,
          formName: element.formName
        }
      });
      return result
   }
  },
  created () {
    // 初始化数据源
    getFromList().then(res => {
      this.formSource = res
    })
  },
  methods: {
    /** 打开弹窗 */
    showModal(parmData){
      // 对应查询参数
      for (const key in parmData || []) {
        this.$set(this.form, key, parmData[key])        
      }
      this.visible = true
    },
    /** 确认按钮 */
    async handleOk() {
      if (!await this.$refs.form.validate()) {
        return
      } 
      const createTimeEndMoment = this.form.startTime && this.form.startTime[1] && clone(this.form.startTime[1])
      exportFlowInstenceTable({
        key: this.formMap[this.form.formId].appKey,
        formId: this.form.formId,
        formVersion: this.formMap[this.form.formId].formVersion,
        starterName: this.form.starterName,
        handleType: this.form.handleType,
        createTimeStart: this.form.startTime && this.form.startTime[0] && this.form.startTime[0].format('YYYY-MM-DD'),
        createTimeEnd: createTimeEndMoment && createTimeEndMoment.add (1,'days').format('YYYY-MM-DD') 
      }).then(res => {
        this.visible = false
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `${this.formMap[this.form.formId].formName}.xls`)
        document.body.appendChild(link)
        link.click()
      })
    },
    /** 取消按钮 */
    handleCancel() {
      this.visible = false
    },
    search(value, optionNode){
      return optionNode.componentOptions.children[0].text.includes(value)
    }
  },
}
</script>

<style lang="less" scoped>
</style>